<template>
	<div class="goodsinfo-wrap">
			
		<transition
			@before-enter="beforeEnter"
			@enter="enter"
			@after-enter="afterEnter"
		>
			<div class="ball" v-show="ballflag" ref="ball"></div>
		</transition>	

		<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotu"></swiper>
					</div>
				</div>
		</div>
		
		<div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
							市场价：<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">{{goodsinfo.sell_price}}</span>
						</p>
						<p>购买数量：<numbox @getCount="getSelectedCount" :max="goodsinfo.num"></numbox></p>
						<!-- 子组件向父组件传值（事件调用机制） -->
						<!-- 事件调用的本质，父向子传递方法，子调用这个方法，同时把数据当参数带回 -->
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>
							<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
						</p>
					</div>
				</div>
				
		</div>

		<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="goods_no">商品编号：{{ goodsinfo.goods_no }}</p>
						<p class="goods_num">尚余库存：{{goodsinfo.num}}</p>
						<p class="goods_time">上架时间：{{ goodsinfo.add_time }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<mt-button type="primary" plain @click="goDesc(90)">图文介绍</mt-button>
					<mt-button type="danger" plain @click="goComment(90)">商品评论</mt-button>
				</div>
			</div>

	</div>
</template>

<script>
import swiper from "../subcomponent/swiper.vue"
import numbox from '../subcomponent/goodsinfo_numbox.vue'


	export default{
		data(){
			return{
				lunbotu:[
					{ url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526711905312&di=d571e26237e8cbd4c0d61ac8217c5123&imgtype=0&src=http%3A%2F%2Fimg18.3lian.com%2Fd%2Ffile%2F201706%2F24%2F47f65736e359f1a992cf549eac03b480.jpg" },
					{ url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526712052217&di=3d40a3dea496fb74d2e58a6dc44356f3&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fwh%3D450%2C600%2Fsign%3Daac8027d242eb938ec3872f6e052a903%2F21a4462309f79052660d46a207f3d7ca7bcbd518.jpg" },
					{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526712012518&di=5dd540419fd461248f743756dfce21c9&imgtype=0&src=http%3A%2F%2Fimg.xiazaizhijia.com%2Fuploads%2F2017%2F0104%2F20170104100538284.jpg"}
				],
				goodsinfo:{
					"add_time":"2018年5月19日13:38:20",
					"goods_no":"95279527",
					"market_price":2699,
					"sell_price":2199,
					"num":99,
					"title":"华为mate9 plus 128G 全网通",
					"id":9527
				},
				ballflag:false,
				selectedCount:1
			}
		},
		components:{
			swiper,
			numbox
		},
		methods:{
			goDesc(id){
				this.$router.push({ name:'goodsdesc', params:{id} });
			},
			goComment(id){
				this.$router.push( {name:'goodscomment', params:{id} });
			},


			addToShopCar(){
				this.ballflag = !this.ballflag;
				// 拼接处一个要保存到store中car数组里的商品信息对象
				// { id：商品id，price：单价，count：数量，selected：false}
				var goodsinfo = {
					id:this.goodsinfo.id,
					count:this.selectedCount,
					price:this.goodsinfo.sell_price,
					selectd:true
				}

				this.$store.commit("addToCar", goodsinfo);
			},



			beforeEnter( el ){
				el.style.transform ="translate(0,0)"
			},
			enter(el, done){
				el.offsetWidth;

				const ballPosition = this.$refs.ball.getBoundingClientRect();
				const badgePosition = document.getElementById("badge").getBoundingClientRect();
				const xDist = badgePosition.left -ballPosition.left;
				const yDist = badgePosition.top - ballPosition.top;

				el.style.transform = `translate( ${xDist}px, ${yDist}px)`;
				el.style.transition = "all 0.5s cubic-bezier(.15,-0.52,1,.46) "
				done();
			},
			afterEnter( el ){
				this.ballflag = !this.ballflag;
			},
			getSelectedCount( count ){
				this.selectedCount = count;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.goodsinfo-wrap{
		background-color:#ccc;
		.mui-card{
			margin-top:0;
		}
	}
	.now_price{
		color:red;
		font-size:16px;
		font-weight:bold;
	}
	.ball{
		width:15px;
		height:15px;
		background-color:red;
		z-index:99;
		position:absolute;
		border-radius:50%;
		left:145px;
		top:380px;
	}

</style>